<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ComboBox</title>
    <script src="jquery-1.8.3.js"></script>
    <script src="ComboBox.js"></script>
    <style>
        .i-combo-box-input-ct {
            display: inline-block;
        }
        .i-combo-box-input {
            border: 1px solid #B5B8C8;
            padding: 1px 3px;
            height: 18px;
        }
        .i-combo-box-input:focus {
            border-color: #7EADD9;
        }
        .i-combo-box-trigger {
            position: relative;
            display: inline-block;
            width: 16px;
            height: 20px;
            border-top: 1px solid #B5B8C8;
            border-right: 1px solid #B5B8C8;
            border-bottom: 1px solid #B5B8C8;
            border-top-right-radius: 2px;
            background-image: -moz-linear-gradient(top, #ededed, #c7c7c7);;
            vertical-align: top;
            cursor: pointer;
        }
        .i-combo-box-trigger em {
            position: absolute;
            left: 4px;
            top: 8px;
            border: 4px solid transparent;
            border-top-color: #666666;
        }
        .i-combo-box-options {
            position: absolute;
            border-left: 1px solid #98C0F4;
            border-right: 1px solid #98C0F4;
            border-bottom: 1px solid #98C0F4;
            box-shadow: 0 4px 4px rgb(136, 136, 136);
        }
        .i-combo-box-option {
            font-size: 12px;
            padding: 2px;
            height: 16px;
            line-height: 16px;
            border: 1px solid transparent;
        }
        .i-combo-box-option-selected {
            border: 1px dotted #8EABE4;
            background-color: #CBDAF0;

        }
        .i-combo-box-option-hover, .i-combo-box-option:hover {
            background-color: #DFE8F6;
            border: 1px dotted #8EABE4;
        }
    </style>
</head>
<body>
<form action="demo.html">
    <input type="submit">
</form>
<script>
    var combo = new ComboBox({
        name: 'type',
        value: '010',
        filter: {
            key: 'display',
            exactMatch: false,
            caseSensitive: false
        },
        data: [
            { value: '010', display: '北京' },
            { value: '021', display: '上海' },
            { value: '1', display: 'abc' },
            { value: '2', display: 'apple' },
            { value: '3', display: 'line' },
            { value: '4', display: 'box' },
            { value: '5', display: 'display' },
            { value: '6', display: 'option' }
        ]
    });
    combo.render('body > form');

    //TODO 联动功能还没实现
</script>
</body>
</html>
